<template>
  <div>
    <button @click="update">update: {{num}}</button>
    <button @click="update2">模版未引用num2， Updated不触发</button>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from "vue";

const num = ref(0);
const num2 = ref(0);

const update = () => {
    num.value += 1;
};
const update2 = () => {
    num2.value += 1;
    console.log(num2.value);
};

onBeforeMount(() => {
  console.log("Component is about to mount");
});

onMounted(() => {
  console.log("Component mounted");
});

onBeforeUpdate(() => {
  console.log("Component is about to update");
});

onUpdated(() => {
  console.log("Component updated");
});

onBeforeUnmount(() => {
  console.log("Component is about to unmount");
});

onUnmounted(() => {
  console.log("Component unmounted");
});

nextTick(() => {
  console.log("nextTick");
});

</script>

